<template>
  <div id="barEchart"></div>
</template>
<script>
export default {
  props: {
    barObj: {
      type: Object,
      required: true,
      default: {
        youzuzhi: [12, 23],
        wuzuzhi: [10, 3],
      },
    },
  },
  data() {
    return {
      barChart: null,
    };
  },
  watch: {
    barObj: {
      deep: true,
      handler(newVal) {
        this.barEchartfn();
      },
    },
  },
  mounted() {
    this.barEchartfn();
    let _this = this;
    window.addEventListener("resize", function () {
      _this.barChart.resize();
    });
  },
  methods: {
    barEchartfn() {
      let _this = this;
      var bar = document.getElementById("barEchart");
      this.barChart = this.$echarts.init(bar);
      var optionBar = {
        grid: {
          left: "10%",
          right: "10%",
          bottom:"20%"
        },
        // ---- legend ----
        legend: {
          type: "plain", // 图列类型，默认为 'plain'
          top: "1%", // 图列相对容器的位置 top\bottom\left\right
          right: "1%",
          textStyle: {
            // 图列内容样式
            color: "#000", // 字体颜色
            backgroundColor: "#fff", // 字体背景色
          },
          tooltip: {
            // 图列提示框，默认不显示
            show: false,
            color: "#fff",
          },
          data: [
            // 图列内容
            {
              name: "在线",
              icon: "circle",
              textStyle: {
                color: "#fff", // 单独设置某一个图列的颜色
                backgroundColor: "rgba(0,0,0,0)", // 单独设置某一个图列的字体背景色
              },
            },
            {
              name: "离线",
              icon: "circle",
              textStyle: {
                color: "#fff", // 单独设置某一个图列的颜色
                backgroundColor: "rgba(0,0,0,0)", // 单独设置某一个图列的字体背景色
              },
            },
          ],
        },
        // ---  提示框 ----
        tooltip: {
          show: true, // 是否显示提示框，默认为true
          trigger: "item", // 数据项图形触发
          axisPointer: {
            // 指示样式
            type: "shadow",
            axis: "auto",
          },
          padding: 5,
          textStyle: {
            // 提示框内容的样式
            color: "#000",
          },
        },
        // ---- gird区域 ---
        //未确定位置
        gird: {
          show: false, // 是否显示直角坐标系网格
          top: 80, // 相对位置 top\bottom\left\right
          containLabel: false, // gird 区域是否包含坐标轴的刻度标签
          tooltip: {
            show: true,
            trigger: "item", // 触发类型
            textStyle: {
              color: "#666",
            },
          },
        },
        //  ------  X轴 ------
        xAxis: {
          show: true, // 是否显示
          position: "bottom", // x轴的位置
          offset: 0, // x轴相对于默认位置的偏移
          type: "category", // 轴类型， 默认为 'category'
          // name: "年",
          nameLocation: "end", // 轴名称相对位置
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#83bff6",
            padding: [5, 0, 0, 0],
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          nameRotate: 0, // 坐标轴名字旋转
          axisLine: {
            // 坐标轴 轴线
            show: true, // 是否显示
            symbol: ["none", "arrow"], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置
            // ------   线 ---------
            lineStyle: {
              color: "#2378f7",
              width: 1,
              type: "solid",
            },
          },
          axisTick: {
            // 坐标轴 刻度
            show: false, // 是否显示
            inside: true, // 是否朝内
            length: 3, // 长度
            lineStyle: {
              // 默认取轴线的样式
              color: "#fff",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            // 坐标轴标签
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 10, // 刻度标签与轴线之间的距离
            color: "#83bff6", // 默认取轴线的颜色
          },
          splitLine: {
            // gird区域中的分割线
            show: false, // 是否显示
            lineStyle: {
             
            },
          },
          splitArea: {
            // 网格区域
            show: false, // 是否显示，默认为false
          },
          data: ["有组织", "无组织"],
        },
        //   ------   y轴  ----------
        yAxis: {
          min: 0, //取0为最小刻度
          // max: 100,
          show: true, // 是否显示
          position: "left", // y轴位置
          offset: 0, // y轴相对于默认位置的偏移
          type: "value", // 轴类型，默认为 ‘category’
          name: "数量", // 轴名称
          nameLocation: "end", // 轴名称相对位置value
          nameTextStyle: {
            // 坐标轴名称样式
            color: "#83bff6",
            padding: [5, 0, 0, 0], // 坐标轴名称相对位置
          },
          nameGap: 15, // 坐标轴名称与轴线之间的距离
          nameRotate: 0, // 坐标轴名字旋转

          axisLine: {
            // 坐标轴 轴线
            show: true, // 是否显示
            //  -----   箭头 -----
            symbol: ["none", "arrow"], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置

            // ----- 线 -------
            lineStyle: {
              color: "#2378f7",
              width: 1,
              type: "solid",
            },
          },
          axisLabel: {
            // 坐标轴的标签
            show: true, // 是否显示
            inside: false, // 是否朝内
            rotate: 0, // 旋转角度
            margin: 8, // 刻度标签与轴线之间的距离
            color: "#83bff6", // 默认轴线的颜色
          },
          splitLine: {
            // gird 区域中的分割线
            show: true, // 是否显示
            lineStyle: {
              color: "#188df0",
              width: 1,
              type: "dashed",
            },
          },
          splitArea: {
            // 网格区域
            show: false, // 是否显示，默认为false
          },
        },
        series: [
          {
            name: "在线", // 序列名称
            type: "bar", // 类型
            barGap: 0,
            legendHoverLink: true, // 是否启用图列 hover 时的联动高亮
            label: {
              show: true,
              position: "top", 
              rotate: 0, 
              color: "#eee",
              formatter:(params)=>{
                return params.value == 0 ? "":params.value
              }
            },
            barWidth: 20, // 柱形的宽度
            barCategoryGap: "20%", // 柱形的间距
            data: this.barObj.youzuzhi,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0.5, color: "#0452e6" },
                { offset: 1, color: "#3485fb" },
                { offset: 1, color: "#188df0" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "#188df0" },
                  { offset: 1, color: "#3485fb" },
                  { offset: 1, color: "#202476" },
                ]),
              },
            },
          },
          {
            name: "离线", 
            type: "bar", 
            barGap: 0,
            legendHoverLink: true, 
            label: {
               show: true,
              position: "top", 
              rotate: 0, 
              color: "#eee",
              formatter:(params)=>{
                return params.value == 0 ? "":params.value
                }
            },
            barWidth: 20, 
            barCategoryGap: "20%", 
            data: this.barObj.wuzuzhi,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0.5, color: "#fd4f27" },
                { offset: 1, color: "#fe9248" },
                { offset: 1, color: "#ff0000" },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 1, color: "#ff0000" },
                  { offset: 1, color: "#fe9248" },
                  { offset: 1, color: "#fd4f27" },
                ]),
              },
            },
          },
        ],
      };
      optionBar && this.barChart.setOption(optionBar);
    },
  },
};
</script>
<style scoped>
#barEchart {
  width: 100%;
  height: 100%;
}
</style>
